document.querySelector('.back').addEventListener('click', function () {
    location.href = './header.html'
})

// 轮播图
const data = [
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg' },
    { url: 'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg' },
]
const img = document.querySelector('.bannerPicture img')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')
const banner = document.querySelector('.banner')
const lis = document.querySelectorAll('.bannerIndicator li')
let index = 0
function fn() {
    img.src = data[index].url
    document.querySelector('.bannerIndicator li.active').classList.remove('active')
    lis[index].classList.add('active')
}
let flag = true
prev.addEventListener('click', function () {
    index++
    if (index > data.length - 1) {
        index = 0
    }
    fn()
})
next.addEventListener('click', function () {
    index--
    if (index < 0) {
        index = data.length - 1
    }
    fn()
})
let timeId = null
timeId = setInterval(function () {
    index++
    if (index > data.length - 1) {
        index = 0
    }
    fn()
}, 2000)
banner.addEventListener('mouseenter', function () {
    clearInterval(timeId)
    prev.style.display = 'block'
    next.style.display = 'block'
})
banner.addEventListener('mouseleave', function () {
    prev.style.display = 'none'
    next.style.display = 'none'
    timeId = setInterval(function () {
        index++
        if (index > data.length - 1) {
            index = 0
        }
        fn()
    }, 2000)
})
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function () {
        index = i
        fn()
    })
}
// 跳转首页
const page = document.querySelector('.row .back')
page.addEventListener('click',function() {
    location.href='../html./header.html'
})

const storage = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/8147e4685e5a0e47c1624772ee868fcc.jpg',
        name: '钻开发员自留款，带滚',
        spec: '滚轮设计，双层设计',
        price: '￥125.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/5a608974e36c829898df20fd0ebf184a.png',
        name: '可水洗的布艺收纳盒',
        spec: '三种规格，收纳杂物',
        price: '￥29.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/75f6cc2c037c09e957cbcc336cf4a652.png',
        name: '换季好帮手，大容量',
        spec: '棉被收纳，干净防尘',
        price: '￥149.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/06461cea9e56b56dd4276e1cb81dd884.png',
        name: '给衣柜减减肥，真空',
        spec: '手动压缩，节省空间',
        price: '￥79.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/76a5304c9d7378a83e63554f3077d98b.png',
        name: '爆款明星好物',
        spec: '抽屉随意拉，东西随意',
        price: '￥129.00'
    }
]
const str =storage.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.fivebox').innerHTML=str


const petfood = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/a36c88ef48b14320166fab465686479f.jpg',
        name: '浓缩的精华，宠物化...',
        spec: '温和化毛，补充营养，...',
        price: '￥39.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/ef56a7139fffe2650a7cd74deafd08da.png',
        name: '定制配方，专属营养...',
        spec: '呵护肠胃，美毛亮毛补...',
        price: '￥69.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/4128d962f1d621d516c6b850cbb8abfe.png',
        name: '多重口味，原肉蒸煮...',
        spec: '原肉盛宴，大粒可见',
        price: '￥9.90'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/fb010b57768a72421cc9b12fad9c7444.png',
        name: '可爱健康不要胖，全...',
        spec: '维持体态，促排毛球',
        price: '￥99.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/536a8d363b0324f8c03cb37b795fcdfb.png',
        name: '定制专属配方...',
        spec: '呵护关节，稳健成长健...',
        price: '￥69.00'
    }
]
const str1 =petfood.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.food').innerHTML=str1

const art = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/cd9060820a1a52f296fa2502e56a5872.jpg',
        name: '浓缩的精华，宠物化...',
        spec: '温和化毛，补充营养，...',
        price: '￥39.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/9d5d0083264344b5d85acde13570d025.jpg',
        name: '定制配方，专属营养...',
        spec: '呵护肠胃，美毛亮毛补...',
        price: '￥69.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/6e38fc94a8fe72c9d139bc48ba6d9814.jpg',
        name: '多重口味，原肉蒸煮...',
        spec: '原肉盛宴，大粒可见',
        price: '￥9.90'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/04753036f123a8ff1b56db60fe440f47.jpg',
        name: '可爱健康不要胖，全...',
        spec: '维持体态，促排毛球',
        price: '￥99.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/2dd8fe9b59774c7ca160bb2d5741c763.jpg',
        name: '定制专属配方...',
        spec: '呵护关节，稳健成长健...',
        price: '￥69.00'
    }
]
const str2 =art.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.artbox').innerHTML=str2

const petgoods = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/9d9590bdb4f7cdd874de6a4554abcff9.jpg',
        name: '不易带出，3毫米原...',
        spec: '经典3mm颗粒，强吸水，...',
        price: '￥29.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/240983ccc935146a4795e3990d30468d.jpg',
        name: '智能饮水机滤芯三片装...',
        spec: '生物感应，紫外除菌...',
        price: '￥42.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/93b61911db2b55185aefd4b92bc52d26.png',
        name: '三重除臭，高效结团...',
        spec: '科学配比，四效合一',
        price: '￥29.90'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/17f5a18b4125733023cad09d6b7852db.jpg',
        name: '快速吸水防回渗，宠..',
        spec: '漏斗般吸水，一点多用',
        price: '￥35.80'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/674ec7a88de58a026304983dd049ea69.jpg',
        name: '木天蓼逗猫棍...',
        spec: '零食玩具互动磨牙...',
        price: '￥16.00'
    }
]
const str3 =petgoods.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.petgoodsbox').innerHTML=str3
const homehealthy = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/0cdfd546f8675669b87716114ad5900a.jpg',
        name: '支撑颈椎无负担，颈椎...',
        spec: '0.23KG轻量化设计，支...',
        price: '￥299.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/8f0c15f981c5cbcb1aa17215a259fa62.png',
        name: '入门首选，语音播报...',
        spec: '全程语音指导，一键测...',
        price: '￥109.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/a153def14233781de524ba184389855c.jpg',
        name: '语音播报，臂式测量...',
        spec: '臂式测量更准确，给爸',
        price: '￥219.90'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/cb09d868c280608a29c1d131dbc08061.jpg',
        name: '家庭常备红外线耳闻..',
        spec: '耳温式体温侧测量更准确',
        price: '￥139.80'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/3cfb2027c8644fe4a29d4809f6a3ad7e.png',
        name: '医用级缓鼻塞，可调...',
        spec: '医用级洗鼻器，深度清...',
        price: '￥39.00'
    }
]
const str4 =homehealthy.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.homebox').innerHTML=str4
const chinesemedical = [
    {
        pic: 'https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg',
        name: '七夕礼物.姐姐同款...',
        spec: '背薄一寸，年轻十岁...',
        price: '￥159.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/16222847be7d090eb538a944a7e0b01b.jpg',
        name: '入真空拔罐器',
        spec: '居家养生必备超简便拔...',
        price: '￥49.00'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/c41003c6df90d7673195dcc2482e13f3.jpg',
        name: '新年佳礼，家用SPA...',
        spec: '坐卧两用，随时随地地做s',
        price: '￥599.90'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/9892cc73945da1591fa5259ad076b23c.jpg',
        name: '暖腰暖腹暖胃，艾草..',
        spec: '暖腰暖腹暖胃，大面积...',
        price: '￥49.80'
    },
    {
        pic: 'https://yanxuan-item.nosdn.127.net/7d1bc78607a08c088b2a7cdbe88c05af.png',
        name: '七夕礼物。挺拔身姿..',
        spec: '众筹爆品回归，专注矫..',
        price: '￥149.00'
    }
]
const str5 =chinesemedical.reduce(function (prev, item) {
    const { pic, name, spec, price } = item
    return prev + `<div class="box">
    <img src="${pic}"alt="">
    <p class="name">${name}</p>
    <p class="spec">${spec}</p>
    <p class="price">${price}</p>
</div>`
},'')
document.querySelector('.chinesebox').innerHTML=str5